<!--
 * 功能： 通用弹窗 含标题、内容、左右按钮、单按钮
 * 作者： caihan
 * 日期:  2021-8-17 9:23:13 ?F10: AM?
 -->
<template>
	<uniPopup ref="popup" :mask-click="false" @change="uniPopupChange">
		<view class="comp-layout">
			<!-- 标题 -->
			<view v-if="title" class="title-comp-layout" :style="[titleCompStyle]">
				<text :style="[titleStyle]">{{title}}</text>
			</view>
			<!-- 文案 -->
			<view v-if="msg" class="msg-comp-layout" :style="isShowOneButton?'':[{borderBottom: '1rpx solid #ECECEC'}]">
				<text :style="[msgStyle]">{{msg}}</text>
			</view>
			<!-- 自定义文案布局 -->
			<slot name="msg"></slot>
			<!-- 单按钮 -->
			<view v-if="isShowOneButton" class="btn-one-layout" @click="btnClick('sure')">
				<text :style="[oneBtnStyle]">{{oneBtnText}}</text>
			</view>
			<!-- 双按钮 -->
			<view class="btn-layout" v-else>
				<!-- 左边按钮 -->
				<view class="btn-comp-layout btn-left" @click="btnClick('cancel')">
					<text :style="[leftBtnStyle]">{{leftBtnText}}</text>
				</view>
				<view style="width: 1rpx;height: 108rpx;background-color: #ECECEC;"></view>
				<!-- 右边按钮 -->
				<view class="btn-comp-layout btn-right" @click="btnClick('confirm')">
					<text :style="[rightBtnStyle]">{{rightBtnText}}</text>
				</view>
			</view>
		</view>
	</uniPopup>
</template>


<script>
	/**
	 * @event {Function} btnClick 点击单按钮触发，e={'sure'};左按钮触发，e={'cancel'};右按钮触发，e={'confirm'}
	 */
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	export default {
		name: "comp-popup",
		components: {
			uniPopup
		},
		data() {
			return {
				isShow: false,
			}
		},
		props: {
			isCustom: {
				type: Boolean,
				default: false
			},
			title: {
				//标题
				type: String,
				default: ''
			},
			// 标题样式
			titleStyle: {
				type: Object,
				default: function() {
					return {
						fontSize: '36rpx',
						lineHeight: '36rpx',
						textAlign: 'center',
						color: '#333333',
					}
				}
			},
			titleCompStyle: {
				type: Object,
				default: function() {
					return {}
				}
			},
			msg: {
				//内容
				type: String,
				default: ''
			},
			// ms内容的样式
			msgStyle: {
				type: Object,
				default: function() {
					return {
						fontSize: '36rpx',
						lineHeight: '36rpx',
						textAlign: 'center',
						color: '#333333',
					}
				}
			},
			leftBtnText: {
				type: String,
				default: '取消'
			},
			leftBtnStyle: {
				type: Object,
				default: function() {
					return {
						color: '#333333',
						fontSize: '32rpx'
					}
				}
			},
			rightBtnText: {
				type: String,
				default: '确定'
			},
			rightBtnStyle: {
				type: Object,
				default: function() {
					return {
						color: '#2DCC70',
						fontSize: '32rpx'
					}
				}
			},
			isShowOneButton: {
				type: Boolean,
				default: false
			},
			oneBtnText: {
				type: String,
				default: '确定'
			},
			oneBtnStyle: {
				type: Object,
				default: function() {
					return {
						color: '#FFFFFF',
						fontSize: '32rpx'
					}
				}
			},

		},
		computed: {},
		watch: {},
		mounted() {
			//挂载到实例上去之后调用
			this.$nextTick(() => {
				// Code that will run only after the
				// entire view has been rendered
			})
		},
		created() {
			//在实例创建完成后被立即调用
		},
		methods: {
			open: function() {
				this.$nextTick(() => {
					this.$refs.popup.open();
				});
			},
			close: function() {
				this.$refs.popup.close();
			},
			btnClick: function(optional) {
				// console.log('-------btnClick-------' + optional);
				this.$refs.popup.close();
				this.$emit(optional, optional);
			},
			uniPopupChange: function(data) {
				this.isShow = data.show;
				// console.log('uniPopupChange ', data);
			},
			isPopShow: function() {
				// console.log('isPopShow ', this.isShow);
				return this.isShow
			},
		}
	}
</script>

<style lang="scss" scoped>
	.comp-layout {
		width: 620rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
	}

	.title-comp-layout {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		min-height: 110rpx;
		border-radius: 16rpx 16rpx 0 0;
		width: 620rpx;
		// background-color: #2DCC70;
	}

	.msg-comp-layout {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		min-height: 240rpx;
		width: 620rpx;
	}


	.btn-one-layout {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		width: 460rpx;
		height: 84rpx;
		background: #2DCC70;
		border-radius: 84rpx;
		margin-bottom: 70rpx;
	}

	.btn-layout {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 620rpx;
	}

	.btn-comp-layout {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		height: 108rpx;
		align-items: center;
		justify-content: center;
		border-radius: 0 0 16rpx 16rpx;
	}

	.btn-left {
		border-radius: 0 0 0 16rpx;
		flex: 1;
	}

	.btn-right {
		border-radius: 0 0 16rpx 0;
		flex: 1;
	}
</style>
